<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟效果</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        .clock {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 50%;
            margin: 100px auto;
        }

        .clockCentre {
            width: 180px;
            height: 180px;
            margin: 10px;
            position: relative;
        }

        .hour, .minutes, .seconds {
            position: absolute;
            top: 50%;

            width: 30%;
            height: 3px;
            background: #bada55;
            /*设置旋转元素的基点位置 ,即旋转轴的位置*/
            transform-origin: 100%;
            /*transform: rotate(90deg);*/
            /*transition: all 0.05s;*/
            transition: transform 0.3s cubic-bezier(0.4, 2.3, 0.6, 1);
        }

        .hour {
            left: 20%;
        }

        .minutes {
            width: 40%;
            left: 10%;
        }

        .seconds {
            width: 50%;
        }
    </style>
</head>
<body>
<div id="root"></div>
</body>
<script src="../lib/babel.min.js"></script>
<script async src="../lib/es-module-shims.js"></script>
<script type="importmap">
        {
          "imports": {
            "react": "https://esm.sh/react?dev",
            "react-dom/client": "https://esm.sh/react-dom/client?dev"
          }
        }











</script>
<script type="text/babel" data-type="module">
    import React, {StrictMode, useEffect, useRef} from 'react';
    import {createRoot} from 'react-dom/client';


    function DigitalScale() {
        let digitalScale = new Array(12).fill(null)
        console.log(digitalScale);
        return (digitalScale.map((_, index) =>
                <div key={index}>{index + 1}</div>
            )
        )
    }

    function App() {
        const pointers = useRef({
            hour: null,
            minute: null,
            second: null
        });


        let timerRef = useRef(null)

        useEffect(() => {
            const upDataClock = () => {
                let curTime = new Date()
                // 获取时间单位
                const hours = curTime.getHours() % 12; // 转换为12小时制
                const minutes = curTime.getMinutes();
                const seconds = curTime.getSeconds();

                // 计算旋转角度（优化计算公式）
                const secondDegrees = ((seconds / 60) * 360) + 90;
                const minuteDegrees = ((minutes / 60) * 360) + ((seconds / 60) * 6) + 90;
                const hourDegrees = ((hours / 12) * 360) + ((minutes / 60) * 30) + 90;

                // 应用旋转样式
                if (pointers.current.second) {
                    pointers.current.second.style.transform = `rotate(${secondDegrees}deg)`;
                }
                if (pointers.current.minute) {
                    pointers.current.minute.style.transform = `rotate(${minuteDegrees}deg)`;
                }
                if (pointers.current.hour) {
                    pointers.current.hour.style.transform = `rotate(${hourDegrees}deg)`;
                }
            }

            // 清除现有定时器
            if (timerRef.current) clearInterval(timerRef.current);

            // 设置新定时器
            timerRef.current = setInterval(upDataClock, 1000);

            // 立即执行一次更新避免初始延迟
            upDataClock();

            // 清理函数
            return () => {
                if (timerRef.current) clearInterval(timerRef.current);
            };
        }, []) // 空依赖数组确保只运行一次
        //
        return (
            <div className="clock">
                <div className="clockCentre">
                    <DigitalScale/>
                    <div className="hour" ref={el => pointers.current.hour = el}></div>
                    <div className="minutes" ref={el => pointers.current.minute = el}></div>
                    <div className="seconds" ref={el => pointers.current.second = el}></div>

                </div>
            </div>
        )
    }


    const container = document.getElementById('root');
    const root = createRoot(container);
    root.render(
        <StrictMode>
            <App/>
        </StrictMode>
    )

    let dataSource = [{
        dataFlag: 0, // 0:(默认,最大值),1:最小值)
        dateStr: 1,  // 日期
        dateTime: 1, // 时间
        nowVal: 1,
        targetCode: 1
    }]

    console.log(isFormValid());

    function isFormValid() {
        let fields = ['dataFlag', 'dateStr', 'dateTime', 'nowVal', 'targetCode']
        return !dataSource.some(item => {
            console.log(item);
            return fields.some(key => {
                console.log(key ,item[key]==undefined || item[key] == '' || item[key] == null);
                return  item[key]==undefined || item[key] == '' || item[key] == null
                })
            }
        );
    }

</script>
</html>
